quickSettings: Add 'subtitle' property

Add a subtitle label to QuickToggle, with a less prominent font.
Make the subtitle invisible when no text is present.

This new property will be used by next commits to implement quick
settings with a static title, and a changing subtitle.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2619>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 54d169321a3023503a13e109d7f851edaacc5167..e19137180b4b03be1571a82c2b2020d7260b4fae 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -31,6 +31,12 @@
   &:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
 
   .quick-toggle-title { font-weight: bold; }
+
+  & StBoxLayout > .quick-toggle-subtitle {
+    font-weight: normal;
+    font-size: 12px;
+  }
+
   .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
 }
 

diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index c07cdcadd551365491af695b3c447f5a619f6265..fd584e2b47db6ac81f6fc28963d27ecaa5b66f73 100644 (file)
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -37,6 +37,9 @@ var QuickToggle = GObject.registerClass({
         'title': GObject.ParamSpec.string('title', '', '',
             GObject.ParamFlags.READWRITE,
             null),
+        'subtitle': GObject.ParamSpec.string('subtitle', '', '',
+            GObject.ParamFlags.READWRITE,
+            null),
         'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
         'gicon': GObject.ParamSpec.object('gicon', '', '',
             GObject.ParamFlags.READWRITE,
@@ -85,13 +88,38 @@ var QuickToggle = GObject.registerClass({
             x_expand: true,
         });
         this.label_actor = this._title;
-        this._box.add_child(this._title);
+
+        this._subtitle = new St.Label({
+            style_class: 'quick-toggle-subtitle',
+            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.START,
+            x_expand: true,
+        });
+
+        const titleBox = new St.BoxLayout({
+            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.START,
+            x_expand: true,
+            vertical: true,
+        });
+        titleBox.add_child(this._title);
+        titleBox.add_child(this._subtitle);
+        this._box.add_child(titleBox);
 
         this._title.clutter_text.ellipsize = Pango.EllipsizeMode.END;
 
         this.bind_property('title',
             this._title, 'text',
             GObject.BindingFlags.SYNC_CREATE);
+
+        this.bind_property('subtitle',
+            this._subtitle, 'text',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property_full('subtitle',
+            this._subtitle, 'visible',
+            GObject.BindingFlags.SYNC_CREATE,
+            (bind, source) => [true, source !== null],
+            null);
     }
 
     set label(label) {